<template>
    <div class="exam-stats-container">
      <div class="stats-cards">
        <!-- 未考试卡片 -->
        <div class="stat-card not-taken">
          <div class="stat-title">未使用</div>
          <div class="stat-count">8份试卷</div>
        </div>
  
        <!-- 进行中卡片 -->
        <div class="stat-card in-progress">
          <div class="stat-title">使用中</div>
          <div class="stat-count">2份试卷</div>
        </div>
  
        <!-- 已结束卡片 -->
        <div class="stat-card completed">
          <div class="stat-title">未归档</div>
          <div class="stat-count">1份试卷</div>
        </div>
      </div>
      <div class="center">
        <div class="a">
          <h2>考试列表</h2>
          <div class="button-group">
            <el-button type="primary" plain>全部</el-button>
            <el-button type="primary" plain>使用中</el-button>
            <el-button type="primary" plain>已归档</el-button>
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="input"
            ></el-input>
          </div>
        </div>
        <div class="b">
          <el-table
            :data="paperData"
            border
            style="width: 80%"
            stripe
          >
            <el-table-column prop="testname" label="试卷名称" width="180" align="center"></el-table-column>
            <el-table-column prop="name" label="创建人" width="150" align="center"></el-table-column>
            <el-table-column prop="time" label="创建时间" width="180" align="center"></el-table-column>
            <el-table-column prop="number" label="使用次数" width="320" align="center">
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
  
          <!-- 分页组件 -->
          <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        stats: [
          { status: "未考试", count: 8 },
          { status: "进行中", count: 2 },
          { status: "已结束", count: 10 },
        ],
        input: "",
        paperData: [
          {
            testname: '2023年第一次月考',
            name: '张三',
            time: '2023-05-09 13:30',
            number:'10次'
          },
          {
            testname: '2023年第二次月考',
            name: '张三',
            time: '2023-06-09 13:30',
             number:'20次'
          },
          {
            testname: '2023年第三次月考',
            name: '张三',
            time: '2023-07-09 13:30',
            number:'19次'
          },
          {
            testname: '2023年第四次月考',
            name: '张三',
            time: '2023-08-09 13:30',
            number:'15次'
          }
        ],
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 100
        }
      };
    },
    methods: {
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        this.fetchData()
      },
      handleDetail() {
        this.$router.push('/main/statistics/detail2')
      }
    }
  };
  </script>
  
  <style scoped>
  .exam-stats-container {
    padding: 20px;
  }
  
  .stats-cards {
    display: flex;
    gap: 20px;
  }
  
  .stat-card {
    flex: 1;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  
  .stat-title {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
  }
  
  .stat-count {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
  
  /* 不同状态卡片的背景色 */
  .not-taken {
    background-color: #f0f7ff;
    border-left: 4px solid #409eff;
  }
  
  .in-progress {
    background-color: #fff7e6;
    border-left: 4px solid #ffba00;
  }
  
  .completed {
    background-color: #f6ffed;
    border-left: 4px solid #67c23a;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
  
  .a {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .button-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  </style>